<template>
  <div>
    <div class="t-h">
        <div class="imgcontainer" h-c>
          <img v-lazy="picture"  class="i-b"/>
          <div class="countdowncontainer a-c" :class="{countdownend:countDownObj.countDownTips=='已结束'||'已兑完',
          countdownnostart:countDownObj.countDownTips=='距开始'}" v-if="countDownObj.countDownTips!=''">
            <span >{{countDownObj.countDownTips}}</span>
            <span v-if="countDownObj.distance>0"  >{{countDownObj.days}}天{{countDownObj.hours}}时{{countDownObj.minutes}}分{{countDownObj.seconds}}秒</span>
          </div>
        </div>
        <p  class="t-t one-line">{{title}}</p>
        <div  class="t-d v-c">
          <span class="yl-my-lvb lvb-icon"></span>
          <span >{{price}}</span>
          <span class="originprice">原价:{{originalPrice}}</span>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
      return{
          countdowntips:"",
          countDownObj:{countDownTips:"",days:"",hours:"",minutes:"",seconds:""},
      }
  },
  props:["title","price","picture","originalPrice","exchangeStartTime","exchangeEndTime","stock"],
  beforeRouteLeave(to, from,next){
    clearInterval(this.countDownObj.timer);
    next();
  },
  mounted(){
    this.init();
  },
  methods:{
    init(){
      const tempStartTime = new Date(this.exchangeStartTime.replace(/-/g,'/')).getTime();
      const tempEndTime = new Date(this.exchangeEndTime.replace(/-/g,'/')).getTime();
      const tempnow = new Date().getTime();
        // Find the distance between now an the count down date
      const tempStartDistance = tempStartTime - tempnow;
      const tempEndDistance = tempEndTime - tempnow;
      if(tempStartDistance>0){
        this.countDownObj.noendtip = "距开始"
        this.countDownObj.endtip = ""
        this.countDownObj.counttime = this.exchangeStartTime
        this.$util.getCountDown(this.countDownObj);
      }else if(tempEndDistance<0){
        this.countDownObj.countDownTips="已结束";
      }else if(this.stock==0){
        this.countDownObj.countDownTips="已兑完";
      }else{
        this.countDownObj.noendtip = ""
        this.countDownObj.endtip = ""
        this.countDownObj.counttime = this.exchangeStartTime
        this.$util.getCountDown(this.countDownObj);
      }
    }
  }

}
</script>
<style lang="less" scoped>
//兑换商品原价
.originprice{
    padding-left: 0.16rem;
    text-decoration: line-through;
    font-size: 0.22rem;
    color: #999999;
  }
.t-h{
    background: #ffffff;
    position: relative;
    margin-bottom: 0.4rem;
    padding: 0.2rem 0.2rem 0 0.2rem;
    width: 3.35rem;
    height: 2.9rem;
    border-radius: 5px;
}
.imgcontainer{
  position: relative;
  font-size: 0.22rem;
}
.countdowncontainer{
  width: 100%;
  // background: rgba(245,125,114,0.8);
  position: absolute;
  bottom: 0.05rem;
  color: #ffffff;
  height: 0.38rem;
}
.countdownend{
  background: rgba(143,143,143,0.8);
}
.countdownnostart{
   background: rgba(245,125,114,0.8);
}

.i-b{
  width: 100%;
  height: 1.7rem;
}

.t-t{
  font-size: 0.24rem;
  color: #333;
  padding: 0.07rem 0.2rem 0.04rem 0;
  font-family: PingFangSC Medium;
  line-height: 0.36rem;
}
.t-d{
  font-size: 0.24rem;
  color: #FB685B;
  padding-right: 0.2rem ;
  .lvb-icon{
    padding: 0.02rem 0.02rem 0 0;
  }
}
</style>


